<template>
  <div class="comment-container">
    <div class="userinfo">
       <el-avatar class="avatar" shape="square" :size="160" :src="commentdata.avatarimg"></el-avatar>
       <div class="info">
         <div class="name"> <span class="text">用户名：</span>{{commentdata.username}}</div>
         <div class="sex"> <span class="text">性别：</span>{{commentdata.sex === 'man'? '男' : '女'}}</div>
         <div class="time"> <span class="text">评论时间：</span>{{commentdata.date}}</div>
         <div class="showname"> <span class="text">剧目名：</span>《{{commentdata.commentshow}}》</div>
         <div class="showrank">
            <span class="text">用户评分：</span>
            <el-rate class="rank" v-model="commentdata.showrank" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
         </div>
       </div>
    </div>
    <div class="commentdata">
       <div class="commentcontent">
         <div class="text">
           用户评论：
         </div>
         <div class="content">
           {{commentdata.content}}
         </div>
       </div>
       <div class="commentimg" ref="commentimg">
            <div class="text">
              评论图片：
            </div>
            <el-image
            v-for="(item, index) in commentdata.commentimg"
            :key='index'
            style="width: 80px; height: 80px; padding-left: 5px"
            :src="item">
            </el-image>
       </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'commentpage',
  data () {
    return {

    }
  },
  props: {
    commentdata: Object,
    default () {
      return {}
    }
  },
  created () {
    // this.cimg = this.commentdata.commentimg
  },
  mounted () {
    // window.onresize = () => {
    //   console.log('评论页面宽度改变')
    //   let width = this.$refs.commentimg.offsetWidth
    //   // 动态处理当前评论里面的图片数据
    //   // 一排可以显示几张图片
    //   let num = Math.floor(width / 85)
    //   // 最多只显示2行
    //   let max = 2 * num
    //   console.log(max)
    //   // 总共有几张图片
    //   // let length = this.commentdata.commentimg.length
    //   this.cimg = this.commentdata.commentimg.slice(0, max)
    //   // this.render = false
    //   // this.$nextTick(() => {
    //   //   this.render = true
    //   // })
    //   console.log(this.cimg.length, max)
    // }
  }
}
</script>

<style lang='stylus' scoped>
.userinfo
  display flex
  margin-bottom 16px
  .avatar
    display inline-block
    margin 4px 0 0 4px
  .info
    flex 1
    margin 4px 0 0 16px
    font-size 14px
    line-height 24px
    height 24px
    .text
      font-size 10px
      color #cccccc
    .name
      display inline-block
    .sex
      display inline-block
      margin-left 8px
.commentdata
  .text
    font-size 10px
    color #cccccc
    margin-bottom 8px
  .commentcontent
    margin 4px 0 16px 4px
    .content
      line-height 16px
      font-size 14px
      text-indent:2em
  .commentimg
    margin 4px 0 16px 4px
</style>
